<template>
  <div>
    <el-form-item
      v-for="({ key, label }, index) in styleKeys"
      :key="index"
      :label="label"
    >
      <el-color-picker
        v-if="key == 'borderColor'"
        v-model="curComponent.style[key]"
      ></el-color-picker>
      <el-color-picker
        v-else-if="key == 'color'"
        v-model="curComponent.style[key]"
      ></el-color-picker>
      <el-color-picker
        v-else-if="key == 'activeColor'"
        v-model="curComponent.style[key]"
      ></el-color-picker>
      <el-color-picker
        v-else-if="key == 'backgroundColor'"
        v-model="curComponent.style[key]"
        show-alpha
      ></el-color-picker>
      <el-color-picker
        v-else-if="key == 'borderBottomColor'"
        v-model="curComponent.style[key]"
      ></el-color-picker>
      <el-select
        v-else-if="selectKey.includes(key)"
        v-model="curComponent.style[key]"
      >
        <template v-if="key == 'textAlign'">
          <el-option
            v-for="item in textAlignOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </template>
        <template v-else-if="key == 'borderStyle'">
          <el-option
            v-for="item in borderStyleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </template>
        <template v-else>
          <el-option
            v-for="item in verticalAlignOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </template>
      </el-select>
       <div v-else-if="key=='opacity'">
         <div>范围(0~1)</div>
         <el-input max="1" min="0" placeholder="范围0~1"  v-model.number="curComponent.style[key]" type="number" />
       </div>
      <el-input v-else v-model.number="curComponent.style[key]" type="number" />
      <!-- <template v-else-if="key == 'borderBottom'">
                          <el-input v-model="curComponent.style[key]" type="number" />
                    </template> -->
    </el-form-item>
    <el-form-item
      v-if="curComponent && !excludes.includes(curComponent.component)"
      label="内容"
    >
      <div v-if="typeof curComponent.propValue == 'object'">
        <el-input v-model="curComponent.propValue.value" type="textarea" />
      </div>
      <div v-else>
        <el-input v-model="curComponent.propValue" type="textarea" />
      </div>
    </el-form-item>
    <el-form-item label="图片尺寸" v-if="curComponent.propValue.imgwidth">
      <div style="clear: both">
        图片宽度
        <el-input v-model="curComponent.propValue.imgwidth" type="number" />
      </div>
      <div>
        图片高度
        <el-input v-model="curComponent.propValue.imgheight" type="number" />
      </div>
    </el-form-item>
    <el-form-item v-if="curComponent.tabList" label="选项卡设置">
      <el-button @click="addtablist(curComponent.tabList)">添加</el-button>
      <div
        style="clear: both"
        v-for="(item, i) of curComponent.tabList"
        :key="i"
      >
        <div>第{{ i + 1 }}个</div>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="item.label"
          style="margin-bottom: 10px"
        >
          <template slot="append">内容</template>
        </el-input>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="item.link"
          style="margin-bottom: 10px"
        >
          <template slot="append">链接</template>
        </el-input>
        <el-button
          type="danger"
          size="mini"
          @click="deltab(curComponent.tabList, i)"
          >删除</el-button
        >
      </div>
    </el-form-item>
    <el-form-item v-if="curComponent.propValue.marginBottom" label="图片间距">
      <div style="clear: both">
        下边距
        <el-input v-model="curComponent.propValue.marginBottom" type="number" />
      </div>
       <div style="clear: both">
        上边距
        <el-input v-model="curComponent.propValue.marginTop" type="number" />
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: [
    "styleKeys",
    "curComponent",
    "selectKey",
    "excludes",
    "textAlignOptions",
    "borderStyleOptions",
    "verticalAlignOptions",
  ],
  methods: {
    deltab(list, i) {
      list.splice(i, 1);
    },
  },
};
</script>

<style>
</style>